import styles from "./index.module.scss";
import { Pagination } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import { setLayers, setLayersLevel2 } from "@/store";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const theme = useSelector((state) => state.theme);
  const layers = useSelector((state) => {
    return state.layers;
  });
  const layersLevel2 = useSelector((state) => {
    return state.layersLevel2;
  });
  const handleOpen = (name) => {
    dispatch(
      setLayersLevel2({
        query: {},
        name,
        other: {},
      })
    );
  };
  const handleClose = () => {
    dispatch(
      setLayers({
        query: {},
        name: "",
        other: {},
      })
    );
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
      {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.searchBox}>
        <div className={styles.listHeader}>
          <div className={styles.listItem}>产品线</div>
          <div className={styles.listItem}>已冲销金额</div>
          <div className={styles.listItem}>未冲销金额</div>
          <div className={styles.listItem}>借款金额</div>
        </div>

        <div className={styles.list} onClick={() => handleOpen("model1")}>
          <div className={styles.listItem}>
            <span className="text-overflow">HW</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
        </div>
        <div className={styles.list} onClick={() => handleOpen("model1")}>
          <div className={styles.listItem}>
            <span className="text-overflow">ICT</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
        </div>
        <div className={styles.list} onClick={() => handleOpen("model1")}>
          <div className={styles.listItem}>
            <span className="text-overflow">ZTE</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
        </div>
        <div className={styles.list} onClick={() => handleOpen("model1")}>
          <div className={styles.listItem}>
            <span className="text-overflow">其他</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
          <div className={styles.listItem}>
            <span className="text-overflow">3,465,723.33</span>
          </div>
        </div>
      </div>
    </div>
  );
}
